import {
  defineComponent,
  useCssVars,
  ref,
  computed,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "border-image" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderImage",
  props: {
    component: {}
  },
  setup(__props) {
    useCssVars(_ctx => ({
      afebc4dc: backgroundColor.value,
      "111cdb92": borderWidth.value,
      "68d8dc03": borderImageUrl.value,
      d41a01b4: borderImageSlice.value
    }));
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const borderImageUrl = computed(
      () => `url(${propValue.base.borderSource || "/images/border-image.png"})`
    );
    const borderImageSlice = computed(() =>
      propValue.base.borderImageSlice.join(" ")
    );
    const borderWidth = computed(() => propValue.base.borderWidth.join(" "));
    const backgroundColor = computed(
      () => propValue.base.backgroundColor || "transparent"
    );
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(), createElementBlock("div", _hoisted_1, null, 512)),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderImage = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-90736242"]
]);
export { BorderImage as default };
